import React, { lazy, Suspense } from 'react';
import { createBrowserRouter } from 'react-router-dom';
import { Root } from '../Root';
import { DashboardLayout } from '../layouts';
import ErrorBoundary from '@/components/errorBoundary'; 

const Dashboard = lazy(() => import('../pages').then(module => ({ default: module.Dashboard })));
const AddProducts = lazy(() => import('../pages').then(module => ({ default: module.AddProducts })));
const OrderList = lazy(() => import('../pages').then(module => ({ default: module.OrderList })));
const UserList = lazy(() => import('../pages').then(module => ({ default: module.UserList })));
const SkinRecordsList = lazy(() => import('../pages').then(module => ({ default: module.SkinRecordsList })));

const NoticeList = lazy(() => import('../pages').then(module => ({ default: module.NoticeList })));
const AddNotice = lazy(() => import('../pages').then(module => ({ default: module.AddNotice })));

const TrialList = lazy(() => import('../pages').then(module => ({ default: module.TrialList })));
const AddTria = lazy(() => import('../pages').then(module => ({ default: module.Addtrial })));

const LoginPage = lazy(() => import('../pages').then(module => ({ default: module.LoginPage })));

export const router = createBrowserRouter([
  {
    path: '/',
    element: <Root />,
    children: [
      /// Dashboard Routes
      {
        path: 'dashboard',
        element: (
          <ErrorBoundary>
            <DashboardLayout />
          </ErrorBoundary>
        ),
        children: [
          {
            index: true,
            path: 'dashboards',
            element: (
              <ErrorBoundary>
                <Suspense fallback={<div>Loading...</div>}>
                  <Dashboard />
                </Suspense>
              </ErrorBoundary>
            ),
          },
          {
            path: 'addproducts',
            element: (
              <ErrorBoundary>
                <Suspense fallback={<div>Loading...</div>}>
                  <AddProducts />
                </Suspense>
              </ErrorBoundary>
            ),
          },
        ],
      },
      {
        path: 'order',
        element: (
          <ErrorBoundary>
            <DashboardLayout />
          </ErrorBoundary>
        ),
        children: [
          {
            index: true,
            path: 'list',
            element: (
              <ErrorBoundary>
                <Suspense fallback={<div>Loading...</div>}>
                  <OrderList />
                </Suspense>
              </ErrorBoundary>
            ),
          },
        ],
      },
      {
        path: 'user',
        element: (
          <ErrorBoundary>
            <DashboardLayout />
          </ErrorBoundary>
        ),
        children: [
          {
            index: true,
            path: 'list',
            element: (
              <ErrorBoundary>
                <Suspense fallback={<div>Loading...</div>}>
                  <UserList />
                </Suspense>
              </ErrorBoundary>
            ),
          },
          {
            path: 'skinRecords',
            element: (
              <ErrorBoundary>
                <Suspense fallback={<div>Loading...</div>}>
                  <SkinRecordsList />
                </Suspense>
              </ErrorBoundary>
            ),
          },
        ],
      },
      {
        path: 'notice',
        element: (
          <ErrorBoundary>
            <DashboardLayout />
          </ErrorBoundary>
        ),
        children: [
          {
            index: true,
            path: 'list',
            element: (
              <ErrorBoundary>
                <Suspense fallback={<div>Loading...</div>}>
                  <NoticeList />
                </Suspense>
              </ErrorBoundary>
            ),
          },
          {
            path: 'addnotice',
            element: (
              <ErrorBoundary>
                <Suspense fallback={<div>Loading...</div>}>
                <AddNotice />
                </Suspense>
              </ErrorBoundary>
            ),
          },
        ],
      },


      {
        path: 'trial',
        element: (
          <ErrorBoundary>
            <DashboardLayout />
          </ErrorBoundary>
        ),
        children: [
          {
            index: true,
            path: 'list',
            element: (
              <ErrorBoundary>
                <Suspense fallback={<div>Loading...</div>}>
                  <TrialList />
                </Suspense>
              </ErrorBoundary>
            ),
          },
          {
            path: 'addtrial',
            element: (
              <ErrorBoundary>
                <Suspense fallback={<div>Loading...</div>}>
                 
                  <AddTria />

                </Suspense>
              </ErrorBoundary>
            ),
          },
        ],
      },

      {
        path: 'login',
        element: (
          <ErrorBoundary>
            <Suspense fallback={<div>Loading...</div>}>
              <LoginPage />
            </Suspense>
          </ErrorBoundary>
        ),
      },
    ],
  },
]);
